<!--  -->
<template>
  <div class="container">
    <Nav title="申请提现">
      <template v-slot:left>
        <span class="back" @click="$router.back()"></span>
      </template>
    </Nav>
    <!-- 内容 -->
    <div class="withdrawal_con">
      <router-link
        to="/bankcard"
        class="withdrawal_bankcard show_public flex justify-between aligin-center"
      >
        <div class="withdrawal_bankcard_con flex aligin-center">
          <template v-if="accountInfo.branch_bank_name&&accountInfo.account_number">
            <span :class="[accountInfo.bank_type=='2'?'alipay':'wx']"></span>
            <div class="withdrawal_bankcard_name">
              <h2 class="f-15 color-black">{{accountInfo.msg}}</h2>
              <!-- <span class="f-12 color-gray">{{accountInfo.msg}}</span> -->
            </div>
          </template>
          <template v-else>
            <div class="f-14 ml-10">未绑定账号，请绑定</div>
          </template>
        </div>
        <i class="cubeic-select transform_90"></i>
      </router-link>
      <div class="withdrawal_number show_public flex justify-between aligin-center">
        <div class="withdrawal_number_left">
          <span class="">提现金额</span>
          <div class="flex aligin-center">￥
            <cube-input v-model="money" type="number"></cube-input>
          </div>
          <cube-validator ref="money" v-model="valid[0]" :model="money" :rules="commonRules"></cube-validator>
          <span class="f-12 color-gray">可提现金额￥{{accountInfo.user_money}}</span>
        </div>
        <div class="withdrawal_number_right color-red" @click="money=accountInfo.user_money">全部提现</div>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="withdrawal_foot">
      <button class="withdrawal_btn btn_public" :class="[flag?'':'bg-gray']" @click="confirm">提现</button>
    </div>
  </div>
</template>

<script>
import Nav from "../../components/Nav";
import { withdrawDefault, withdrawSingle } from "../../api/api";
export default {
  components: { Nav },
  data() {
    return {
      money: "",
      valid: [undefined],
      commonRules: {
        required: true
      },
      accountInfo: {},
      flag: true
    };
  },
  computed: {},
  watch: {},
  methods: {
    
    // 提交
    confirm() {
      if(!(this.accountInfo.branch_bank_name&&this.accountInfo.account_number)){
          this.$notify('未绑定账号，请绑定');
          return
      }
      const money = this.$refs.money.validate();
      Promise.all([money]).then(() => {
        if (this.valid.every(item => item)) {
          this.flag = false;
          withdrawSingle({ id: this.accountInfo.id, money: this.money}).then(
            res => {
              this.$notify({
                message: "提现成功",
                duration: 1000,
                background: "#1989fa"
              });
              setTimeout(() => {
                this.$router.back();
              }, 2000);
            },
            res => {
              this.flag = true;
            }
          );
        }
      });
    }
  },
  created() {},
  mounted() {
    withdrawDefault({device_code:1}).then(({ data: { result } }) => {
      this.accountInfo = result;
    });
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../../assets/style/mixin.less");
//@import url(); 引入公共css类
.container /deep/ .cube-input {
  width: 200px;
  font-size: 21px;
  font-weight: 500;
  color: rgba(3, 51, 51, 1);
}
.withdrawal_bankcard {
  height: 75px;
  padding: 0 20px 0 16px;
}
.withdrawal_bankcard_con > img {
  width: 36px;
  height: 36px;
  border-radius: 100%;
  padding-right: 10px;
}
.withdrawal_number {
  padding: 22px 23px 29px 19px;
}
.withdrawal_number_left span:first-child {
  font-size: 13px;
}
.withdrawal_bankcard_name{
  flex: 1;
}
.withdrawal_bankcard_name h2 {
  padding-bottom: 6px;
}
.withdrawal_number_left > div {
  margin: 20px 0;
}
.withdrawal_number_left > div input {
  font-size: 21px;
}
.withdrawal_foot {
  margin: 40px 15px 0 15px;
}
.alipay {
  margin-right: 15px;
  height: 36px;
  width: 36px;
  background: url("../../assets/imgs/alipay.png");
  background-size: 100% 100%;
}
.bg-gray {
  background: #ebebeb;
}
.wx {
  margin-right: 15px;
  height: 36px;
  width: 36px;
  background: url("../../assets/imgs/wx-pay.png");
  background-size: 100% 100%;
  border-radius: 50%;
}
</style>